<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>淘宝列表导航案例</title>
	<link rel="stylesheet" href="css/reset.css">
	<style type="text/css">
		.taobao_list{
			float: left;
			border-top: 1px solid #f4f4f4;
		}
		.taobao_list ul{
			width: 292px;
			overflow: hidden;
		}
		.taobao_list ul li{
			float: left;
			width: 71px;
			height: 75px;
			border: 1px solid #f4f4f4;
			border-top-color: transparent;
			border-left-color: transparent;
		}
		.taobao_list ul li a{
			text-align: center;
			display: block;
			font-size: 12px;
			color: #888;
		}
		.taobao_list ul li a span{
			margin-top: 12px;
			display: inline-block;
			width: 24px;
			height: 24px;
			background: url('images/taobao_list.png') no-repeat 0 0;
			background-size: 24px 597px;
		}
		.taobao_list ul li a span.span1{
			background-position: 0 0;
		}
		.taobao_list ul li a span.span2{
			background-position: 0 -88px;
		}
		.taobao_list ul li a span.span3{
			background-position: 0  -44px;
		}

	</style>
</head>
<body>
	<div class="taobao_list">
		<ul>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span1"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span2"></span>
					<p>旅行</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span3"></span>
					<p>车险</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span4"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span5"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span6"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span7"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span8"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span9"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span10"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span11"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<!-- 背景图 -->
					<span class="span12"></span>
					<p>充话费</p>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>